<template>
    <div>
        <el-container>
            <el-table
                    :data="highzdf"
                    style="width: 100%"
                    @sort-change="onSortChange"
                    :default-sort = "{prop: 'date', order: 'descending'}"
                    :row-key="getRowKeys"
                    :expand-row-keys="expands"
                    @row-click="clickRowHandle"
            >
                <el-table-column
                        label="时间"
                        width="120"
                        sortable="custom"
                        prop="code"
                        :sort-orders="['ascending','descending']">
                    <template slot-scope="scope" >
                        <span :style="{'color': (scope.row.hintType ==1 ? '#bf0606':'#100b0c')}">{{scope.row.code}}</span>
                        <div >{{scope.row.name}}</div>
                       <div >ts: {{scope.row.tsOrder}}</div>
                       <div >as:{{scope.row.asorder}}</div>
                    </template>
                </el-table-column>

                <el-table-column
                        label="次数"
                        width="120"
                        sortable="custom"
                        prop="num"
                        :sort-orders="['ascending','descending']">
                    <template slot-scope="scope" >
                        <div >{{scope.row.num}}</div>
                    </template>
                </el-table-column>

                <el-table-column
                        label="数据"
                        width="120"
                        sortable="custom"
                        prop="sshy"
                        :sort-orders="['ascending','descending']">
                    <template slot-scope="scope" >
                        <div >{{scope.row.sshy}}</div>
                        <div >xz:{{scope.row.zf10}}</div>
                        <div >ts:{{scope.row.zf20}}</div>

                    </template>
                </el-table-column>
            </el-table>
        </el-container>
    </div>
</template>

<script>
    import Axios from 'axios';
    export default {
        name: 'HintShares',
        props: {
            msg: String,
        },
        data() {
            return {
                getRowKeys(row) {
                    return row.time;
                },
                hintList: null,
                expands: [],
                nowDate : '',
                nowTime  : '',
                nowWeek : '',
                timer: null,
                highzdf: ''
            }
        },
        mounted () {
            // this.timer = setInterval(() => {
            //     this.setNowTimes()
            // }, 1000)
            this.setNowTimes()
        },
        created(){
            //发送请求
            // this.hintNum();
            this.shareNum()
        },
        methods: {
            setNowTimes () {
                let myDate = new Date()
                let wk = myDate.getDay()
                let yy = String(myDate.getFullYear())
                let mm = myDate.getMonth() + 1
                let dd = String(myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate())
                let hou = String(myDate.getHours() < 10 ? '0' + myDate.getHours() : myDate.getHours())
                let min = String(myDate.getMinutes() < 10 ? '0' + myDate.getMinutes() : myDate.getMinutes())
                let sec = String(myDate.getSeconds() < 10 ? '0' + myDate.getSeconds() : myDate.getSeconds())
                let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
                let week = weeks[wk];
                if(mm<10){
                    mm="0"+mm;
                }
                this.nowDate = yy + '-' + mm + '-' + dd;
                this.nowTime = hou + ':' + min + ':' + sec;
                this.nowWeek = week;
            },
            changestatus(itme){
            },
            clickRowHandle(row, column, event) {
                if (this.expands.includes(row.index)) {
                    this.expands = this.expands.filter(val => val !== row.index);
                } else {
                    this.expands.push(row.index);
                }
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            hintNum(){
                var url=this.Global.httpUrl+"/shares/hintNum";
                Axios.get(url).then((response)=>{
                    this.hintList=response.data.data;
                }).catch((error)=>{
                    console.log(error);
                })
            },
            shareNum(){
                var url=this.Global.httpUrl+"/shares/highzdf";
                Axios.get(url).then((response)=>{
                    this.highzdf=response.data.data;
                }).catch((error)=>{
                    console.log(error);
                })
            },
            /**
             * 表格排序事件处理函数
             * @param {object} {column,prop,order} 列数据|排序字段|排序方式
             */
            onSortChange({ prop, order }) {
                this.hintList.sort(this.compare(prop,order));
            },
            /**
             * 排序比较
             * @param {string} propertyName 排序的属性名
             * @param {string} sort ascending(升序)/descending(降序)
             * @return {function}
             */
            compare (propertyName, sort) {
                return function (obj1, obj2) {
                    var value1 = obj1[propertyName]

                    var value2 = obj2[propertyName]
                    // console.log(value1+"==="+value2);
                    if (typeof value1 === 'string' && typeof value2 === 'string') {
                        const res = value1.localeCompare(value2, 'zh')
                        return sort === 'ascending' ? res : -res
                    } else {
                        if (value1+0 <= value2+0) {
                            return sort === 'ascending' ? -1 : 1
                        } else if (value1 > value2) {
                            return sort === 'ascending' ? 1 : -1
                        }
                    }
                }
            }
        }
    }
</script>

<style scoped>

</style>